<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <scroll-list 
          :header="header" 
          :list="scrolList" 
          :prop="prop"
        ></scroll-list>
        <div>
          <title-card title="滚动动画"></title-card>
          <pre-code style="margin-bottom:20px" :code="animeHtml" language="xml" />
          <pre-code :code="animeList" language="JavaScript" />
          <title-card title="鼠标移入暂停"></title-card>
          <pre-code :code="mouseOver" language="JavaScript" />
          <title-card title="鼠标移出继续"></title-card>
          <pre-code :code="mouseLeave" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="AnimeList">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from "@/components/TitleCard/index.vue"
import ScrollList from "./ScrollList/index.vue";
import { postArticleDetail } from '@/api/home.js';
import { scrollList } from '@/api/article.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);
const header = ref(['id','时间','ip','地址']);
const scrolList = ref([]);
const prop = ref(['id','data','ip','url']);

const animeHtml = ref(`<template>
  <div class="animeList">
    <div class="list-top">
      <div v-for="(item1, index1) in header" :key="'list1' + index1">
        {{ item1 }}
      </div>
    </div>
    <div class="list-box" @mouseleave="mouseLeave" @mouseover="mouseOver" :key="key">
      <div
        v-for="(item, index) in watchList"
        :class="'list-item' 'list-item-'+itemClass"
        :key="'list2' + index"
        @click="rowClick(index)"
      >
        <div class="list-top item-box" :class="indexStatus==index?'rowBg':''">
          <div v-for="(propitem, indexprop) in prop" :key="'prop' + indexprop">
            <span :title="item && item[propitem]">{{
              item && item[propitem]
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>`)
const animeList = ref(`const animeList = async () => {
  let item = await watchList.value[0];
  if (item) {
    watchList.value.push(item);
    var elements = document.querySelectorAll('.list-item-'+itemClass.value)[0];
    animation = anime({
      targets: elements,
      translateY: -40,
      height: 0,
      opacity: 0.2,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 1500,
      autoplay: true,
      complete: () => {
        watchList.value.splice(0, 1);
        if (indexStatus.value > 0) {
          indexStatus.value--;
        } else if (indexStatus.value == 0) {
          indexStatus.value = watchList.value.length - 1;
        }
        key.value++;
        animeList();
      }
    });
  }
};`)
const mouseOver = ref(`const mouseOver = () => {
  animation.pause();
};`)
const mouseLeave = ref(`const mouseOver = () => {
  animation.play();
};`)

const getTitle = () => {
  postArticleDetail({
    route: 'AnimeList',
  }).then((res) => {
    articleData.value = res.data;
  });
};
const init = () => {
  scrollList({
    size:10
  }).then(res =>{
    scrolList.value = res.data;
  })
}
onMounted(() => {
  getTitle();
  init();
});
</script>
